<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="header" v-if="currentTab === 'home'">
      <view class="search-bar">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input class="search-input" placeholder="搜索停车记录..." v-model="searchText" @input="handleSearch" />
      </view>
      <view class="settings-btn cursor-pointer">
        <a href="https://readdy.ai/home/bbcc2824-1edb-4632-8536-892f1f7e4c8d/b69d99b1-336f-4ade-9d10-0bac50f020d0"
          data-readdy="true">
          <uni-icons type="gear" size="20" color="#4A90E2"></uni-icons>
        </a>
      </view>
    </view>
    <!-- 分类标签栏 -->
    <scroll-view v-if="currentTab === 'home'" class="category-scroll" scroll-x="true" show-scrollbar="false">
      <view class="category-tabs">
        <view v-for="(category, index) in categories" :key="index" class="category-tab cursor-pointer"
          :class="{ active: activeCategory === category.id }" @click="switchCategory(category.id)">
          {{ category.name }}
        </view>
      </view>
    </scroll-view>
    <!-- 主内容区域 -->
    <scroll-view v-if="currentTab === 'home'" class="main-content" scroll-y="true" @scrolltolower="loadMore">
      <view class="parking-cards">
        <view v-for="record in filteredRecords" :key="record.id" class="parking-card cursor-pointer"
          @click="viewDetail(record)" @longpress="showCardOptions(record)">
          <view class="card-header">
            <view class="parking-info">
              <text class="parking-name">{{ record.parkingName }}</text>
              <text class="parking-spot">{{ record.spotNumber }}</text>
            </view>
            <view class="card-time">
              <text class="time-text">{{ formatTime(record.createTime) }}</text>
            </view>
          </view>
          <view class="card-content">
            <view class="photo-section" v-if="record.photo">
              <image class="parking-photo" :src="record.photo" mode="aspectFill" />
            </view>
            <view class="info-section">
              <view class="location-info" v-if="record.location">
                <uni-icons type="location" size="14" color="#666"></uni-icons>
                <text class="location-text">{{ record.location }}</text>
              </view>
              <view class="note-info" v-if="record.note">
                <uni-icons type="chat" size="14" color="#666"></uni-icons>
                <text class="note-text">{{ record.note }}</text>
              </view>
              <view class="tags" v-if="record.tags && record.tags.length > 0">
                <view v-for="tag in record.tags" :key="tag" class="tag">
                  {{ tag }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredRecords.length === 0">
          <uni-icons type="car" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无停车记录</text>
          <text class="empty-tip">点击下方按钮添加第一条记录吧</text>
        </view>
      </view>
    </scroll-view>
    <!-- 设置页面 -->
    <scroll-view v-if="currentTab === 'settings'" class="settings-content" scroll-y="true">
      <view class="settings-list">
        <view class="settings-group">
          <view class="settings-header">账户设置</view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="person" size="20" color="#666"></uni-icons>
              <text>个人信息</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="car" size="20" color="#666"></uni-icons>
              <text>车辆信息</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="settings-group">
          <view class="settings-header">通用设置</view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="notification" size="20" color="#666"></uni-icons>
              <text>消息通知</text>
            </view>
            <switch checked color="#4A90E2" />
          </view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="location" size="20" color="#666"></uni-icons>
              <text>定位服务</text>
            </view>
            <switch checked color="#4A90E2" />
          </view>
        </view>
        <view class="settings-group">
          <view class="settings-header">其他</view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="help" size="20" color="#666"></uni-icons>
              <text>帮助中心</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
          <view class="settings-item">
            <view class="settings-item-left">
              <uni-icons type="info" size="20" color="#666"></uni-icons>
              <text>关于我们</text>
            </view>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="logout-button">
          退出登录
        </view>
      </view>
    </scroll-view>
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" @click="switchTab('home')" :class="{ active: currentTab === 'home' }">
        <uni-icons :type="currentTab === 'home' ? 'home-filled' : 'home'" size="24"
          :color="currentTab === 'home' ? '#4A90E2' : '#999'"></uni-icons>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item add-tab" @click="showAddModal">
        <view class="add-button">
          <uni-icons type="plus" size="24" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="tab-item" @click="switchTab('settings')" :class="{ active: currentTab === 'settings' }">
        <uni-icons :type="currentTab === 'settings' ? 'gear-filled' : 'gear'" size="24"
          :color="currentTab === 'settings' ? '#4A90E2' : '#999'"></uni-icons>
        <text class="tab-text">设置</text>
      </view>
    </view>
    <!-- 添加记录弹窗 -->
    <view class="modal-overlay" v-if="showAdd" @click="hideAddModal">
      <view class="add-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加停车记录</text>
          <view class="modal-close cursor-pointer" @click="hideAddModal">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="modal-content">
          <!-- 停车场选择 -->
          <view class="form-group">
            <text class="form-label">停车场/小区</text>
            <view class="select-container cursor-pointer" @click="showParkingSelect">
              <input class="form-input" placeholder="选择或输入停车场名称" v-model="newRecord.parkingName" disabled />
              <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <!-- 车位号输入 -->
          <view class="form-group">
            <text class="form-label">车位号</text>
            <input class="form-input spot-input" placeholder="请输入车位号" v-model="newRecord.spotNumber" />
          </view>
          <!-- 备注区域 -->
          <view class="form-group">
            <text class="form-label">备注信息</text>
            <view class="note-container">
              <textarea class="note-textarea" placeholder="添加备注信息..." v-model="newRecord.note"
                maxlength="200"></textarea>
              <view class="note-actions">
                <view class="voice-btn cursor-pointer" @click="startVoiceInput">
                  <uni-icons type="mic" size="18" color="#4A90E2"></uni-icons>
                </view>
              </view>
            </view>
          </view>
          <!-- 标签 -->
          <view class="form-group">
            <text class="form-label">标签</text>
            <view class="tags-container">
              <view v-for="tag in commonTags" :key="tag" class="tag-option cursor-pointer"
                :class="{ selected: newRecord.tags.includes(tag) }" @click="toggleTag(tag)">
                {{ tag }}
              </view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <view class="btn-cancel cursor-pointer" @click="hideAddModal">取消</view>
          <view class="btn-save cursor-pointer" @click="saveRecord">保存</view>
        </view>
      </view>
    </view>
    <!-- 停车场选择弹窗 -->
    <view class="modal-overlay" v-if="showParkingModal" @click="hideParkingModal">
      <view class="parking-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择停车场</text>
          <view class="modal-close cursor-pointer" @click="hideParkingModal">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="parking-search">
          <input class="search-input" placeholder="搜索或输入新停车场..." v-model="parkingSearch" />
        </view>
        <scroll-view class="parking-list" scroll-y="true">
          <view v-for="parking in filteredParkings" :key="parking.id" class="parking-item cursor-pointer"
            @click="selectParking(parking)">
            <text class="parking-item-name">{{ parking.name }}</text>
            <text class="parking-item-count">{{ parking.count }}次</text>
          </view>
          <view class="parking-item cursor-pointer" @click="addNewParking" v-if="parkingSearch">
            <text class="parking-item-name">添加 "{{ parkingSearch }}"</text>
            <uni-icons type="plus" size="16" color="#4A90E2"></uni-icons>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 详情弹窗 -->
    <view class="modal-overlay" v-if="showDetail" @click="hideDetail">
      <view class="detail-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">停车记录详情</text>
          <view class="header-actions">
            <view class="action-btn cursor-pointer" @click="editRecord">
              <uni-icons type="compose" size="18" color="#4A90E2"></uni-icons>
            </view>
            <view class="action-btn cursor-pointer" @click="deleteRecord">
              <uni-icons type="trash" size="18" color="#ff4757"></uni-icons>
            </view>
            <view class="modal-close cursor-pointer" @click="hideDetail">
              <uni-icons type="close" size="20" color="#666"></uni-icons>
            </view>
          </view>
        </view>
        <scroll-view class="detail-content" scroll-y="true" v-if="selectedRecord">
          <view class="detail-section">
            <text class="detail-title">{{ selectedRecord.parkingName }}</text>
            <text class="detail-spot">车位号: {{ selectedRecord.spotNumber }}</text>
            <text class="detail-time">{{ formatDetailTime(selectedRecord.createTime) }}</text>
          </view>
          <view class="detail-photo" v-if="selectedRecord.photo">
            <image class="detail-image" :src="selectedRecord.photo" mode="aspectFit" />
          </view>
          <view class="detail-info">
            <view class="info-item" v-if="selectedRecord.location">
              <uni-icons type="location" size="16" color="#666"></uni-icons>
              <text class="info-text">{{ selectedRecord.location }}</text>
            </view>
            <view class="info-item" v-if="selectedRecord.note">
              <uni-icons type="chat" size="16" color="#666"></uni-icons>
              <text class="info-text">{{ selectedRecord.note }}</text>
            </view>
            <view class="info-tags" v-if="selectedRecord.tags && selectedRecord.tags.length > 0">
              <view v-for="tag in selectedRecord.tags" :key="tag" class="detail-tag">
                {{ tag }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 'home',
      searchText: '',
      activeCategory: 'all',
      showAdd: false,
      showParkingModal: false,
      showDetail: false,
      parkingSearch: '',
      selectedRecord: null,
      categories: [
        { id: 'all', name: '全部' },
        { id: 'home', name: '小区' },
        { id: 'mall', name: '商场' },
        { id: 'office', name: '写字楼' },
        { id: 'hospital', name: '医院' },
        { id: 'other', name: '其他' }
      ],
      parkingRecords: [
        {
          id: '1',
          parkingName: '万达广场地下停车场',
          spotNumber: 'B2-A108',
          photo: 'https://readdy.ai/api/search-image?query=Underground%20parking%20garage%20with%20clear%20parking%20space%20number%20B2-A108%20painted%20on%20concrete%20floor%2C%20modern%20LED%20lighting%2C%20clean%20and%20well-maintained%20parking%20area%2C%20concrete%20pillars%2C%20white%20line%20markings%2C%20realistic%20photography%20style%2C%20bright%20lighting%2C%20high%20detail%20quality&width=300&height=200&seq=parking1&orientation=landscape',
          location: '南京市建邺区万达广场',
          note: '靠近电梯口，方便购物',
          tags: ['商场', '地下'],
          createTime: Date.now() - 3600000,
          categoryId: 'mall'
        },
        {
          id: '2',
          parkingName: '绿地世纪城',
          spotNumber: '1-205',
          photo: 'https://readdy.ai/api/search-image?query=Residential%20community%20parking%20space%20with%20number%201-205%2C%20outdoor%20parking%20area%2C%20modern%20apartment%20buildings%20in%20background%2C%20clear%20parking%20space%20markings%2C%20daytime%20photography%2C%20realistic%20style%2C%20clean%20environment%2C%20organized%20parking%20layout&width=300&height=200&seq=parking2&orientation=landscape',
          location: '南京市江宁区绿地世纪城',
          note: '小区固定车位',
          tags: ['小区', '固定'],
          createTime: Date.now() - 7200000,
          categoryId: 'home'
        },
        {
          id: '3',
          parkingName: '德基广场',
          spotNumber: 'B1-C056',
          photo: 'https://readdy.ai/api/search-image?query=Premium%20shopping%20mall%20underground%20parking%20with%20space%20number%20B1-C056%2C%20modern%20design%2C%20excellent%20lighting%2C%20luxury%20parking%20environment%2C%20clean%20concrete%20floor%2C%20professional%20parking%20space%20markings%2C%20high-end%20commercial%20building%20parking&width=300&height=200&seq=parking3&orientation=landscape',
          location: '南京市玄武区中山路',
          note: '购物中心，收费较高',
          tags: ['商场', '收费'],
          createTime: Date.now() - 10800000,
          categoryId: 'mall'
        },
        {
          id: '4',
          parkingName: '紫峰大厦',
          spotNumber: '15F-A23',
          photo: 'https://readdy.ai/api/search-image?query=Office%20building%20parking%20space%2015F-A23%2C%20modern%20corporate%20parking%20garage%2C%20professional%20environment%2C%20clean%20and%20organized%2C%20business%20district%20parking%2C%20high-rise%20building%20parking%20facility%2C%20well-lit%20parking%20area&width=300&height=200&seq=parking4&orientation=landscape',
          location: '南京市鼓楼区中央路',
          note: '办公楼停车，工作日使用',
          tags: ['办公', '工作日'],
          createTime: Date.now() - 14400000,
          categoryId: 'office'
        }
      ],
      parkingPlaces: [
        { id: '1', name: '万达广场地下停车场', count: 5 },
        { id: '2', name: '绿地世纪城', count: 12 },
        { id: '3', name: '德基广场', count: 3 },
        { id: '4', name: '紫峰大厦', count: 8 },
        { id: '5', name: '南京南站', count: 2 }
      ],
      newRecord: {
        parkingName: '',
        spotNumber: '',
        note: '',
        tags: []
      },
      commonTags: ['商场', '小区', '办公', '医院', '地下', '露天', '收费', '免费', '固定', '临时']
    }
  },
  computed: {
    filteredRecords() {
      let records = this.parkingRecords
      if (this.activeCategory !== 'all') {
        records = records.filter(record => record.categoryId === this.activeCategory)
      }
      if (this.searchText) {
        const search = this.searchText.toLowerCase()
        records = records.filter(record =>
          record.parkingName.toLowerCase().includes(search) ||
          record.spotNumber.toLowerCase().includes(search) ||
          (record.note && record.note.toLowerCase().includes(search))
        )
      }
      return records.slice().sort((a, b) => b.createTime - a.createTime)
    },
    filteredParkings() {
      if (!this.parkingSearch) {
        return this.parkingPlaces
      }
      return this.parkingPlaces.filter(parking =>
        parking.name.toLowerCase().includes(this.parkingSearch.toLowerCase())
      )
    }
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab
    },
    switchCategory(categoryId) {
      this.activeCategory = categoryId
    },
    handleSearch() {
      // 搜索逻辑已在计算属性中处理
    },
    showAddModal() {
      this.resetNewRecord()
      this.showAdd = true
    },
    hideAddModal() {
      this.showAdd = false
    },
    showParkingSelect() {
      this.showParkingModal = true
      this.parkingSearch = ''
    },
    hideParkingModal() {
      this.showParkingModal = false
    },
    selectParking(parking) {
      this.newRecord.parkingName = parking.name
      this.hideParkingModal()
    },
    addNewParking() {
      if (this.parkingSearch.trim()) {
        this.newRecord.parkingName = this.parkingSearch.trim()
        this.hideParkingModal()
      }
    },
    startVoiceInput() {
      uni.showToast({
        title: '语音输入功能开发中',
        icon: 'none'
      })
    },
    toggleTag(tag) {
      if (!this.newRecord.tags) {
        this.newRecord.tags = []
      }
      const index = this.newRecord.tags.indexOf(tag)
      if (index > -1) {
        this.newRecord.tags.splice(index, 1)
      } else {
        this.newRecord.tags.push(tag)
      }
    },
    saveRecord() {
      if (!this.newRecord.parkingName || !this.newRecord.spotNumber) {
        uni.showToast({
          title: '请填写停车场和车位号',
          icon: 'none'
        })
        return
      }
      const record = {
        id: Date.now().toString(),
        parkingName: this.newRecord.parkingName,
        spotNumber: this.newRecord.spotNumber,
        photo: this.newRecord.photo,
        location: this.newRecord.location,
        note: this.newRecord.note,
        tags: this.newRecord.tags || [],
        createTime: Date.now(),
        categoryId: this.getCategoryByTags(this.newRecord.tags || [])
      }
      this.parkingRecords.unshift(record)
      // 更新停车场统计
      const existingPlace = this.parkingPlaces.find(p => p.name === record.parkingName)
      if (existingPlace) {
        existingPlace.count++
      } else {
        this.parkingPlaces.push({
          id: Date.now().toString(),
          name: record.parkingName,
          count: 1
        })
      }
      this.hideAddModal()
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
    },
    getCategoryByTags(tags) {
      if (tags.includes('小区')) return 'home'
      if (tags.includes('商场')) return 'mall'
      if (tags.includes('办公')) return 'office'
      if (tags.includes('医院')) return 'hospital'
      return 'other'
    },
    resetNewRecord() {
      this.newRecord = {
        parkingName: '',
        spotNumber: '',
        note: '',
        tags: []
      }
    },
    viewDetail(record) {
      this.selectedRecord = record
      this.showDetail = true
    },
    hideDetail() {
      this.showDetail = false
      this.selectedRecord = null
    },
    editRecord() {
      uni.showToast({
        title: '编辑功能开发中',
        icon: 'none'
      })
    },
    deleteRecord() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条停车记录吗？',
        success: (res) => {
          if (res.confirm && this.selectedRecord) {
            const index = this.parkingRecords.findIndex(r => r.id === this.selectedRecord.id)
            if (index > -1) {
              this.parkingRecords.splice(index, 1)
              this.hideDetail()
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
            }
          }
        }
      })
    },
    showCardOptions(record) {
      uni.showActionSheet({
        itemList: ['查看详情', '编辑', '删除'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.viewDetail(record)
              break
            case 1:
              this.editRecord()
              break
            case 2:
              this.selectedRecord = record
              this.deleteRecord()
              break
          }
        }
      })
    },
    loadMore() {
      // 加载更多数据的逻辑
    },
    formatTime(timestamp) {
      const now = Date.now()
      const diff = now - timestamp
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(diff / 3600000)
      const days = Math.floor(diff / 86400000)
      if (minutes < 60) {
        return `${minutes}分钟前`
      } else if (hours < 24) {
        return `${hours}小时前`
      } else {
        return `${days}天前`
      }
    },
    formatDetailTime(timestamp) {
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    }
  },
  mounted() {
    // 页面加载时的初始化操作
  }
}
</script>
<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f9fa;
}

.cursor-pointer {
  cursor: pointer;
}

/* 顶部搜索栏 */
.header {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 16rpx 24rpx;
  margin-right: 24rpx;
}

.search-input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.settings-btn {
  padding: 8rpx;
}

/* 分类标签栏 */
.category-scroll {
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.category-tabs {
  display: flex;
  padding: 24rpx 32rpx;
  white-space: nowrap;
}

.category-tab {
  padding: 16rpx 32rpx;
  margin-right: 24rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.category-tab.active {
  background-color: #4A90E2;
  color: #fff;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow: auto;
}

.parking-cards {
  padding: 24rpx 32rpx;
}

.parking-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.parking-info {
  flex: 1;
}

.parking-name {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.parking-spot {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #4A90E2;
}

.card-time {
  flex-shrink: 0;
}

.time-text {
  font-size: 24rpx;
  color: #999;
}

.card-content {
  display: flex;
  gap: 24rpx;
}

.photo-section {
  flex-shrink: 0;
  width: 160rpx;
  height: 120rpx;
}

.parking-photo {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.location-info,
.note-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.location-text,
.note-text {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 8rpx;
}

.tag {
  padding: 8rpx 16rpx;
  background-color: #e8f4fd;
  color: #4A90E2;
  font-size: 22rpx;
  border-radius: 16rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  margin: 24rpx 0 12rpx;
}

.empty-tip {
  font-size: 26rpx;
  color: #ccc;
}

/* 底部导航栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.tab-item.active .tab-text {
  color: #4A90E2;
}

.add-tab {
  position: relative;
  top: -30rpx;
}

.add-button {
  width: 100rpx;
  height: 100rpx;
  background-color: #4A90E2;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, 0.3);
}

/* 调整主内容区域，防止被底部导航栏遮挡 */
.main-content,
.settings-content {
  padding-bottom: 140rpx;
}

/* 设置页面样式 */
.settings-content {
  flex: 1;
  background-color: #f8f9fa;
}

.settings-list {
  padding: 24rpx 0;
}

.settings-group {
  margin-bottom: 24rpx;
  background-color: #fff;
}

.settings-header {
  padding: 24rpx 32rpx;
  font-size: 28rpx;
  color: #999;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.settings-item-left text {
  font-size: 30rpx;
  color: #333;
}

.logout-button {
  margin: 48rpx 32rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #fff;
  color: #ff4757;
  font-size: 32rpx;
  border-radius: 12rpx;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 32rpx;
}

.add-modal,
.parking-modal,
.detail-modal {
  background-color: #fff;
  border-radius: 24rpx;
  width: 100%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.action-btn {
  padding: 8rpx;
}

.modal-close {
  padding: 8rpx;
}

.modal-content {
  flex: 1;
  padding: 32rpx;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 32rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  border: 2px solid #f0f0f0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
}

.form-input:focus {
  border-color: #4A90E2;
}

.spot-input {
  font-size: 36rpx;
  font-weight: 600;
  text-align: center;
}

.select-container {
  position: relative;
  display: flex;
  align-items: center;
}

.select-container .form-input {
  padding-right: 60rpx;
}

.select-container uni-icons {
  position: absolute;
  right: 24rpx;
}

.note-container {
  position: relative;
}

.note-textarea {
  width: 100%;
  min-height: 160rpx;
  padding: 24rpx;
  border: 2px solid #f0f0f0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  resize: none;
}

.note-actions {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
}

.voice-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 16rpx;
}

.tag-option {
  padding: 16rpx 24rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 26rpx;
  border-radius: 20rpx;
  border: 2px solid transparent;
}

.tag-option.selected {
  background-color: #e8f4fd;
  color: #4A90E2;
  border-color: #4A90E2;
}

.modal-footer {
  display: flex;
  padding: 32rpx;
  gap: 24rpx;
  border-top: 1px solid #f0f0f0;
}

.btn-cancel,
.btn-save {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #666;
}

.btn-save {
  background-color: #4A90E2;
  color: #fff;
}

/* 停车场选择弹窗 */
.parking-search {
  padding: 24rpx 32rpx;
  border-bottom: 1px solid #f0f0f0;
}

.parking-list {
  flex: 1;
  max-height: 600rpx;
  overflow-y: auto;
}

.parking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f8f8f8;
}

.parking-item-name {
  font-size: 28rpx;
  color: #333;
}

.parking-item-count {
  font-size: 24rpx;
  color: #999;
}

/* 详情弹窗 */
.detail-content {
  flex: 1;
  overflow-y: auto;
}

.detail-section {
  padding: 32rpx;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.detail-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.detail-spot {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #4A90E2;
  margin-bottom: 12rpx;
}

.detail-time {
  display: block;
  font-size: 26rpx;
  color: #999;
}

.detail-photo {
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
}

.detail-image {
  width: 100%;
  border-radius: 12rpx;
}

.detail-info {
  padding: 32rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
}

.info-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 24rpx;
}

.detail-tag {
  padding: 12rpx 20rpx;
  background-color: #e8f4fd;
  color: #4A90E2;
  font-size: 24rpx;
  border-radius: 16rpx;
}
</style>